<template>
  <el-tabs v-model="accountTab" type="card" class="system-account-tab" @tab-remove="handleRemove">
    <el-tab-pane label="人员资料" name="人员资料">
      <div class="system-account">
        <div class="right-click" v-show="treeData.nodeMenu" :style="{left: treeData.menuLeft, top: treeData.menuTop}">
          <p class="add" @click="onTreeAdd">新建</p>
          <p class="amd" @click="onTreeAmd">修改</p>
          <p class="del" @click="onTreeDel">删除</p>
        </div>
        <el-card shadow="hover" class="system-left-tree">
          <div class="tree-header">
            <div class="tree-header-title">部门列表</div>
            <el-button size="mini" type="success" @click="onTreeAdd">新建</el-button>
            <el-button size="mini" type="primary" @click="onTreeAmd">修改</el-button>
            <el-button size="mini" type="danger" @click="onTreeDel">删除</el-button>
          </div>
          <el-tree :data="treeData.data" node-key="id" default-expand-all @node-contextmenu="rightHandleLeaf" draggable @node-click="leftHandleLeaf" ref="letfTree" style="margin: 10px 0 0 10px;">
            <template #default="{ node }">
              <i class="el-icon-folder-opened"></i>
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </el-card>
        <div class="system-user-container">
          <el-card shadow="hover" class="system-user-search mb15">
            <div style="display: inline-block; width: 50px; 	text-align: right;">用户名&nbsp;&nbsp;</div>
            <el-input size="small" placeholder="请输入" prefix-icon="el-icon-search" style="max-width: 180px"></el-input>
            <div style="display: inline-block; width: 50px;	text-align: right;">昵称&nbsp;&nbsp;</div>
            <el-input size="small" placeholder="请输入" prefix-icon="el-icon-search" style="max-width: 180px"></el-input>
            <el-input style="width: 300px;margin-left:20px" size="small">
              <template #prepend>
                <el-select size="small" v-model="selectvv" class="input-with-select">
                  <el-option label="姓名" value="1"></el-option>
                  <el-option label="账户" value="2"></el-option>
                  <el-option label="工号" value="3"></el-option>
                  <el-option label="手机" value="4"></el-option>
                  <el-option label="邮箱" value="5"></el-option>
                </el-select>
              </template>
            </el-input>
            <el-button size="small" type="primary" class="ml10" style="float: right">查询</el-button>
          </el-card>
          <el-card shadow="hover" class="system-user-table">
            <div class="system-userTable-title">
              <span style="float: left">账号列表</span>
              <div style="float: right">
                <el-button size="mini" type="primary" @click="handleClick(1)">调出</el-button>
                <el-button size="mini" type="primary" @click="handleClick(2)">调入</el-button>
                <el-button size="mini" type="primary">停用</el-button>
                <el-button size="mini" type="primary">权限</el-button>
                <el-button size="mini" type="primary">导出</el-button>
                <el-button size="mini" type="primary">删除</el-button>
                <el-button size="mini" type="primary">启用</el-button>
                <el-button size="mini" type="primary">启用</el-button>

              </div>
            </div>
            <el-table :data="tableData.data" size="mini" stripe border>
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="num" label="账号" show-overflow-tooltip></el-table-column>
              <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
              <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
              <el-table-column prop="work" label="工号" show-overflow-tooltip></el-table-column>
              <el-table-column prop="department" label="所属部门" show-overflow-tooltip></el-table-column>
              <el-table-column prop="role" label="角色" show-overflow-tooltip></el-table-column>
              <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
              <el-table-column label="状态" show-overflow-tooltip>
                <template #default="scope">
                  <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="path" label="操作" width="90" fixed="right">
                <template #default="scope">
                  <i class="el-icon-warning-outline optionIcon"></i>
                  <i class="el-icon-edit-outline optionIcon" @click="onRowEdit(scope.row)"></i>
                  <i class="el-icon-delete optionIcon" @click="onRowDel(scope.row)"></i>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="tableData.param.pageNum" background v-model:page-size="tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" style="float: right">
            </el-pagination>
          </el-card>
        </div>
        <el-dialog title="新增部门" v-model="addFormVisible">
          <el-form ref="Form" :model="addForm" label-width="80px" class="system-account-addForm" label-position="left">
            <el-form-item label="名称:">
              <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="归属:">
              <p>{{accountPage.label}}</p>
            </el-form-item>
            <el-form-item label="隐藏:">
              <el-switch v-model="addForm.conceal"></el-switch>
            </el-form-item>
            <el-form-item label="是否班组:">
              <el-switch v-model="addForm.team"></el-switch>
            </el-form-item>
            <el-form-item label="是否单位:">
              <el-switch v-model="addForm.unit"></el-switch>
            </el-form-item>
            <el-form-item label="简称:">
              <el-input v-model="addForm.shortName"></el-input>(用于自动编号)
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onAddSubmit">立即创建</el-button>
              <el-button @click="addFormVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog title="修改部门" v-model="amdFormVisible">
          <el-form ref="Form" :model="amdForm" label-width="80px" class="system-account-amdForm" label-position="left">
            <el-form-item label="名称:">
              <el-input v-model="amdForm.name"></el-input>
            </el-form-item>
            <el-form-item label="归属:">
              <p>{{accountPage.label}}</p>
            </el-form-item>
            <el-form-item label="隐藏:">
              <el-switch v-model="amdForm.conceal"></el-switch>
            </el-form-item>
            <el-form-item label="是否班组:">
              <el-switch v-model="amdForm.team"></el-switch>
            </el-form-item>
            <el-form-item label="是否单位:">
              <el-switch v-model="amdForm.unit"></el-switch>
            </el-form-item>
            <el-form-item label="简称:">
              <el-input v-model="amdForm.shortName"></el-input>(用于自动编号)
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onAmdSubmit">确定</el-button>
              <el-button @click="amdFormVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <el-dialog title="编辑角色" v-model="editDialogVisible" width="400px" center>
        
        </el-dialog>
      </div>
    </el-tab-pane>
    <el-tab-pane label="添加人员" name="添加人员">
      <add-config @handleClick="handleClick"></add-config>
    </el-tab-pane>
    
    <el-tab-pane label="导入人员" name="导入人员">
      <div class="import">
        <div class="circle">1</div>
        <div class="line"></div>
        <div class="circle" :class="importClass">2</div>
        <div class="line" :class="importClass"></div>
        <div class="circle noArrive">3</div>
      </div>
      <div class="import-txt">
        <div>导入Excel</div>
        <div :class="importClass">确认信息</div>
        <div class="noArrive">完成</div>
      </div>
      <el-card class="import-list" v-if="importList">
        <ul>
          <li>导入Excel</li>
          <li>1.编辑Excel电子表格信息，将员工信息按照模板（下载模板）进行整理</li>
          <li>2.选择整理完成的Excel文件进行上传</li>
          <li>3.如果导入已完成，点击此处同步用户所在单位</li>
          <li>4.导入时原兼职部门将被清除</li>
          <li>↑ 添加文件</li>
          <li>
            <el-button @click="onImportNext(0)">下一步</el-button>
          </li>
        </ul>
      </el-card>
      <el-card class="import-table" v-if="!importList">
        <div>
          <p>您共填写<span>{{importTableAll}}</span>条数据，格式正确数据<span>{{importTableRight}}</span>条，格式错误数据<span>{{importTableFalse}}</span>条。</p>
          <p>导入失败的原因包括：</p>
          <p>1. 必填项内容为空 2. 手机号码已被占用 3. 手机号非法 4. 员工编号已存在</p>
        </div>
        <div style="margin-top: 10px">
          格式成功数据
        </div>
        <el-table :data="importTable.rightData" stripe class="import-table-container" border>
          <el-table-column prop="acc" label="账号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="nume" label="姓名" show-overflow-tooltip></el-table-column>
          <el-table-column prop="num" label="工号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="phone" label="手机" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
          <el-table-column prop="staff" label="员工编号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          格式失败数据
        </div>
        <el-table :data="importTable.failedData" stripe class="import-table-container" border>
          <el-table-column prop="acc" label="账号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="nume" label="姓名" show-overflow-tooltip></el-table-column>
          <el-table-column prop="num" label="工号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="phone" label="手机" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column>
          <el-table-column prop="staff" label="员工编号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="import-table-btn">
          <el-button @click="onImportUp()">上一步</el-button>
          <el-button @click="onImportNext(1)">下一步</el-button>
        </div>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="用户编辑" name="用户编辑" v-if="eddShow" :closable="true" >
      <el-tabs v-model="accountTab2" style="background:#fff;padding-left:10px" class="accountTab2-tabs">
        <el-tab-pane label="用户信息" name="用户信息">
           <editAcc  @handleClick="handleClick"></editAcc>
        </el-tab-pane>
        <el-tab-pane label="角色" name="角色">
           <user-config ></user-config>
        </el-tab-pane>
        <el-tab-pane label="权限" name="权限">
           <power></power>
        </el-tab-pane>
        <el-tab-pane label="管理部门" name="管理部门">
           <admin ></admin>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
  <el-dialog title="请选择部门" v-model="ExportVisible" center>
    <el-tree :data="treeData.data" node-key="id" default-expand-all show-checkbox ref="ExportTree" style="margin: 10px 0 0 10px;">
      <template #default="{ node }">
        <i class="el-icon-folder-opened"></i>
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
        </span>
      </template>
    </el-tree>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="ExportVisible = false">取 消</el-button>
        <el-button type="primary" @click="ExportVisible = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="EnterVisible" width="900px">
    <el-tabs @tab-click="EnterTabClick" class="system-account-tabs" v-model='EnterTab' type="card">
      <el-tab-pane label="最近" name="lately">
      </el-tab-pane>
      <el-tab-pane label="部门" name="department">
      </el-tab-pane>
      <el-tab-pane label="角色" name="role">
      </el-tab-pane>
      <el-tab-pane label="角色组" name="group">
      </el-tab-pane>
    </el-tabs>
    <div class="account-department">
      <div v-if="EnterTab === 'lately'" style="width:1px;height: 300px">
      </div>
      <div v-if="EnterTab === 'department'">
        <el-tree :data="treeData.data" node-key="id" default-expand-all @node-click="onDepartmentTree" ref="EnterTree" style="width: 200px;height: 300px">
          <template #default="{ node }">
            <i class="el-icon-folder-opened"></i>
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
      <div v-if="EnterTab === 'role'">
        <ul class="account-department-role">
          <li v-for="(i , index) in roleyoptions" :key="i.value" @click="onDepartmentList(i.value , index)" :class="index === roleIndex ?  'departmentSelect': ''">
            <i class="el-icon-user-solid"></i>
            <span>{{ i.value }}</span>
          </li>
        </ul>
      </div>
      <div v-if="EnterTab === 'group'">
        <ul class="account-department-role">
          <li v-for="(i , index) in groupoptions" :key="i.value" @click="onDepartmentGroup(i.value , index)" :class="index === groupIndex ?  'departmentSelect': ''">
            <i class="el-icon-user-solid"></i>
            <span>{{ i.value }}</span>
          </li>
        </ul>
      </div>
      <el-card class="department-stay">
        <ul>
          <li>{{EnterTab === 'lately' ? '最近人员': '待选人员'}}</li>
          <li v-for="i in departmentStay" :key="i.name" :class="`department-`+ i.select" @click="onDepartmentStay(i.name)" @dblclick="onDbDepartmentStay(i.name)">
            <i class="el-icon-user-solid"></i>
            <span>{{ i.name }}</span>
          </li>
        </ul>
      </el-card>
      <div class="department-btn">
        <el-button type="primary" icon="el-icon-d-arrow-right" circle class="department-btn-right" @click="onDepartmentRight"></el-button>
        <el-button type="primary" icon="el-icon-d-arrow-left" circle class="department-btn-left" @click="onDepartmentLeft"></el-button>
      </div>
      <el-card class="department-has">
        <ul>
          <li>已选人员</li>
          <li v-for="(i, index) in  departmentHas" :key="i.name" :class="`department-`+ i.select" @click="onDepartmentHas(i.name)">
            <i class="el-icon-user-solid"></i>
            <span>{{ i.name }}</span>
            <i class="el-icon-error" @click="onDepHasDel(i.name)"></i>
            <div class="department-sort" v-if="departmentHas.length !== 1">
              <i class="el-icon-top" @click="onDepHasTop(i, index, $event)" v-if="index !== 0"></i>
              <i class="el-icon-bottom" @click="onDepHasBot(i, index, $event )" v-if="index !== departmentHas.length -1"></i>
            </div>
          </li>
        </ul>
      </el-card>
    </div>
    <el-button type="primary" @click="EnterVisible = false" style="margin-left:48%">确 定</el-button>
  </el-dialog>
</template>

<script >
import { toRefs, reactive, onMounted } from 'vue';
import addConfig from './addConfig.vue'
import editAcc from './editAcc.vue'
import userConfig from './userConfig.vue'
import power from './power.vue'
import admin from './admin.vue'
export default {
  name: 'systemAccount',
  components: {
    addConfig,
    userConfig,
    editAcc,
    power,
    admin
  },
  setup() {
    const state = reactive({
      accountTab: '人员资料',
      accountTab2:'用户信息',
      eddShow:false,
      tableData: {
        data: [],
        total: 0,
        loading: false,
        param: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      selectvv: '姓名',
      accountPage: '',
      accountPageId: 1,
      addFormVisible: false,
      amdFormVisible: false,
      editDialogVisible: false,
      ExportVisible: false,
      EnterVisible: false,
      EnterTab: 'department',
      treeData: {
        data: [
          {
            id: 1,
            label: '南京云网',
            children: [
              {
                id: 2,
                label: '总经办',
              },
              {
                id: 3,
                label: '行政部',
              },
              {
                id: 4,
                label: '市场部',
              },
              {
                id: 5,
                label: '财务部',
              },
              {
                id: 6,
                label: '事业部',
                children: [
                  {
                    id: 7,
                    label: '商务部2',
                  },
                  {
                    id: 8,
                    label: '采购部2',
                  },
                  {
                    id: 9,
                    label: '研发部',
                  },
                  {
                    id: 10,
                    label: '推广部',
                  },
                ],
              },
            ],
          },
        ],
        nodeMenu: false,
        menuLeft: '',
        menuTop: '',
        defaultProps: {
          children: 'children',
          label: 'label',
        },
      },
      addForm: {
        name: '',
        shortName: '',
        affiliation: '',
        conceal: false,
        team: false,
        unit: false,
      },
      amdForm: {
        name: '',
        shortName: '',
        affiliation: '',
        conceal: false,
        team: false,
        unit: false,
      },
      editForm: {
      },
      latelyoptions: [
        {
          value: '胡伟',
          label: '胡伟',
        },
        {
          value: '李浩',
          label: '李浩',
        },
        {
          value: '田宇',
          label: '田宇',
        },
        {
          value: '陈成',
          label: '陈成',
        },
        {
          value: '管理员',
          label: '管理员',
        },
      ],
      latelyvalue: '胡伟',
      roleyoptions: [
        {
          value: '总经理',
          label: '总经理',
        },
        {
          value: '销售总监',
          label: '销售总监',
        },
        {
          value: '副总经理',
          label: '副总经理',
        },
        {
          value: '财务总监',
          label: '财务总监',
        },
        {
          value: '行政总监',
          label: '行政总监',
        },
      ],
      roleyvalue: '总经理',
      roleIndex: 0,
      groupIndex: 0,
      groupoptions: [
        {
          value: '每个人',
          label: '每个人',
        },
        {
          value: 'oa会议小组',
          label: 'oa会议小组',
        },
      ],
      groupvalue: '每个人',
      departmentStay: [
        {
          name: '胡伟1',
          select: true,
        },
        {
          name: '胡伟2',
          select: false,
        },
        {
          name: '胡伟3',
          select: false,
        },
        {
          name: '胡伟4',
          select: false,
        },
        {
          name: '胡伟5',
          select: false,
        },
      ],
      departmentHas: [
      ],
      activities: [
        {
          content: 'Event start',
          timestamp: '2018-04-15',
        },
        {
          content: 'Approved',
          timestamp: '2018-04-13',
        },
        {
          content: 'Success',
          timestamp: '2018-04-11',
        },
      ],
      importClass: 'noArrive',
      importList: true,
      importTableAll: 0,
      importTableRight: 0,
      importTableFalse: 0,
      importTable: {
        rightData: [
        ],
        failedData: [
        ],
      },

    });

    // 初始化表格数据
    const initTableData = () => {
      const data = [];
      for (let i = 0; i < 10; i++) {
        data.push({
          num: `00${i + 1}`,
          name: (Math.round(Math.random() * 20901) + 19968).toString(16),
          phone: Math.floor(Math.random() * 10000000000),
          email: `${Math.floor(Math.random() * 1000)}@qq.com`,
          sex: i % 2 === 0 ? '男' : '女',
          role: '销售总监',
          status: true,
          department: '总经办',
          work: '',
          time: new Date().toLocaleDateString(),
        });
      }
      state.tableData.data = data;
      state.tableData.total = state.tableData.data.length;
    };
    // 当前行删除
    const onRowDel = (row) => {
      console.log(row);
    };
    // 分页改变
    const onHandleSizeChange = (val) => {
      state.tableData.param.pageSize = val;
    };
    // 分页改变
    const onHandleCurrentChange = (val) => {
      state.tableData.param.pageNum = val;
    };


    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    return {
      onRowDel,
      onHandleSizeChange,
      onHandleCurrentChange,
      ...toRefs(state),
    };
  },
  methods: {
    rightHandleLeaf(event, data, node) {
      this.treeData.nodeMenu = true
      this.treeData.menuLeft = event.clientX + 'px'
      this.treeData.menuTop = event.clientY + 'px'
      this.accountPage = data
      this.amdForm.name = data.label
      this.accountPageId = data.id
      this.accountPagenode = node
    },
    leftHandleLeaf(data, node) {
      this.treeData.nodeMenu = false
      this.accountPage = data
      this.amdForm.name = data.label
      this.accountPageId = data.id
      this.accountPagenode = node
    },
    handleRemove(){
      this.accountTab = "人员资料"
      this.eddShow= false
    },
    onTreeDel(val) {
      this.treeData.nodeMenu = false
      this.$alert('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        callback: (action) => {
          if (action === 'confirm') {
            const parent = this.accountPagenode.parent
            const children = parent.data.children || parent.data
            const index = children.findIndex((d) => d.id === this.accountPageId)
            children.splice(index, 1)
          }
        },
      })
    },
    onTreeAdd(val) {
      this.addFormVisible = true
      this.treeData.nodeMenu = false
    },
    onTreeAmd(val) {
      this.treeData.nodeMenu = false
      this.amdFormVisible = true
    },
    onAddSubmit() {
      this.addFormVisible = false
      const { accountPageId, addForm } = this
      function loop(data) {
        data.map(item => {
          if (item.children) {
            loop(item.children)
          }
          if (item.id === accountPageId) {
            item.children ? '' : item.children = []
            item.children.push({
              id: addForm.shortName,
              label: addForm.name,
            })
          }
        })
      }
      loop(this.treeData.data)

    },
    onAmdSubmit() {
      this.amdFormVisible = false
      const { accountPageId, amdForm } = this
      function loop(data) {
        data.map(item => {
          if (item.children) {
            loop(item.children)
          }
          if (item.id === accountPageId) {
            item.label = amdForm.name
          }
        })
      }
      loop(this.treeData.data)
    },
    EnterTabClick(tab) {
      if (tab.props.name === 'lately') {
        this.departmentStay.map((item, index) => {
          item.name = '' + index
        })
      }
      if (tab.props.name === 'role') {
        this.departmentStay.map((item, index) => {
          item.name = '总经理' + index
        })
      }
      if (tab.props.name === 'group') {
        this.departmentStay.map((item, index) => {
          item.name = '每个人' + index
        })
      }
      if (tab.props.name === 'department') {
        this.departmentStay.map((item, index) => {
          item.name = '总经办' + index
        })
      }
    },
    onRowEdit(row) {
      this.eddShow = true
      this.accountTab = "用户编辑"
      this.editForm = { ...row }
    },
    onDepartmentStay(name) {
      this.departmentStay.map(i => {
        i.name === name ? i.select = !i.select : ''
      })
    },
    onDbDepartmentStay(name) {
      this.departmentStay.map(i => {
        i.name === name ? this.departmentHas.push(JSON.parse(JSON.stringify(i))) : ''
      })
      this.departmentStay = this.departmentStay.filter(i => {
        return i.name !== name
      })
    },
    onDepartmentHas(name) {
      this.departmentHas.map(i => {
        i.name === name ? i.select = !i.select : ''
      })
    },
    onDepartmentRight() {
      this.departmentStay.map(i => {
        if (i.select) {
          let flag = this.departmentHas.some(j => {
            return i.name === j.name
          })
          if (!flag) {
            let tmp = JSON.parse(JSON.stringify(i))
            tmp.select = false
            this.departmentHas.push(tmp)
          }
        }
      })
      this.departmentStay = this.departmentStay.filter(i => {
        return !i.select
      })
    },
    onDepartmentLeft() {
      this.departmentHas = this.departmentHas.filter(i => {
        return !i.select
      })
    },
    onDepHasDel(name) {
      this.departmentHas = this.departmentHas.filter(i => {
        return i.name !== name
      })
    },
    handleClick(val) {
      console.log('213', val)
      if (val == 1) {
        this.ExportVisible = true
      } else {
        this.EnterVisible = true
      }
    },
    onDepHasTop(i, index, e) {
      e && e.stopPropagation();
      if (index !== 0) {
        this.departmentHas.splice(index, 1)
        this.departmentHas.splice(index - 1, 0, i)
      }
    },
    onDepHasBot(i, index, e) {
      e && e.stopPropagation();
      if (index !== (this.departmentHas.length - 1)) {
        this.departmentHas.splice(index, 1)
        this.departmentHas.splice(index + 1, 0, i)
      }
    },
    onDepartmentTree(data, node) {
      this.departmentStay.map((item, index) => {
        item.name = data.label + index
      })
    },
    onDepartmentList(data, index) {
      this.departmentStay.map((item, j) => {
        item.name = data + j
      })
      this.roleIndex = index
    },
    onDepartmentGroup(data, index) {
      this.departmentStay.map((item, j) => {
        item.name = data + j
      })
      this.groupIndex = index
    },
    onImportNext(f) {
      if (f === 0) {
        this.importClass = ''
        this.importList = false
      }
    },
    onImportUp() {
      this.importClass = 'noArrive'
      this.importList = true
    },
  },
  mounted() {
    document.addEventListener('click', (e) => {
      e.path.some(item => item.className === 'right-click') ? '' : this.treeData.nodeMenu = false
    })
  }
};
</script>

<style scoped lang="scss">
.system-account {
	display: flex;
	.system-user-search {
		min-height: 50px;
		padding: 0;
	}
	.system-user-container {
		width: calc(100% - 330px);
		height: 810px;
		margin-left: 20px;
		margin-top: 0px;
		.system-userTable-title {
			text-align: center;
			padding-bottom: 40px;
		}
		.system-user-photo {
			width: 40px;
			height: 40px;
			border-radius: 100%;
		}
	}
	.tree-header {
		border-bottom: 1px solid #d9d9d9;
		.tree-header-title {
			display: inline-block;
			vertical-align: middle;
			padding-left: 7px;
			font-size: 16px;
			line-height: 46px;
			padding-right: 40px;
		}
	}
	.system-left-tree {
		width: 310px;
		height: 810px;
		.el-tree {
			.el-tree-node {
				background: saddlebrown;
			}
		}
	}
	.right-click {
		background-color: rgb(245, 245, 245);
		width: 100px;
		position: fixed;
		border: 1px solid #979797;
		box-shadow: 2px 2px 2px #999999;
		z-index: 999;
		p {
			height: 35px;
			text-align: center;
			line-height: 35px;
			cursor: pointer;
			&:hover {
				background-color: #e8eff7;
				box-shadow: 0 0 2px #0a6aa1;
			}
		}
	}
	.system-account-addForm {
		.el-input {
			width: 170px;
		}
	}
}
.optionIcon {
	font-size: 14px;
	color: rgb(9, 96, 189);
	cursor: pointer;
	padding: 0 2px;
}
.import {
	display: flex;
	justify-content: center;
	.circle {
		width: 40px;
		height: 40px;
		border-radius: 50px;
		background: #87c3f1;
		text-align: center;
		line-height: 40px;
		font-size: 20px;
		overflow: visible;
		color: #ffffff;
	}
	.line {
		width: 100px;
		height: 10px;
		background: #87c3f1;
		margin-top: 15px;
	}
	.noArrive {
		background: #d6d6d6;
	}
}
.import-txt {
	display: flex;
	justify-content: center;
	div {
		margin: 10px 50px 0 35px;
		font-weight: bold;
		color: #ff9a0a;
	}
	.noArrive {
		color: #000;
		font-weight: unset;
	}
}
.import-list {
	ul {
		width: 950px;
		margin: auto;
		list-style: none;
		li {
			border: 1px solid #c3c3c3;
			height: 30px;
			line-height: 30px;
			&:first-of-type {
				font-size: 24px;
				text-align: center;
				background: rgb(245, 245, 245);
			}
			&:last-of-type {
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
.import-table {
	p {
		> span {
			color: red;
		}
	}
	.import-table-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		.el-button {
			margin-left: 15px;
			margin-top: 15px;
		}
	}
}
.account-department {
	display: flex;
	justify-content: space-evenly;
	padding-bottom: 30px;
	.account-department-role {
		list-style: none;
		height: 300px;
		width: 200px;
		li {
			cursor: pointer;
			border-bottom: 1px solid #c3c3c3;
			// width: 200px;
			height: 30px;
			line-height: 30px;
			i {
				font-size: 20px;
				margin: 0 10px;
			}
			&.departmentSelect {
				background-color: #d5d5d5;
			}
		}
	}
	.department-stay,
	.department-has {
		width: 216px;
		ul {
			list-style: none;
			// border: 1px solid #c3c3c3;
			li {
				border-bottom: 1px solid #c3c3c3;
				// width: 200px;
				height: 30px;
				line-height: 30px;
				&:first-of-type {
					font-size: 24px;
					// font-weight: 900;
					text-align: center;
				}
				.el-icon-user-solid {
					font-size: 20px;
					margin: 0 10px;
				}
				.el-icon-error {
					float: right;
					line-height: 30px;
					color: red;
					cursor: pointer;
					font-size: 20px;
				}
				.department-sort {
					padding-left: 50px;
					display: inline-block;
					.el-icon-top,
					.el-icon-bottom {
						line-height: 30px;
						color: #0a6aa1;
						font-size: 20px;
						margin-right: 5px;
						cursor: pointer;
					}
				}
			}
			.department-true {
				background-color: #d5d5d5;
			}
		}
	}
	.department-btn {
		width: 30px;
		text-align: center;
		.el-button {
			display: block;
			margin: 0;
			&:first-of-type {
				margin-top: 80px;
				margin-bottom: 20px;
			}
		}
	}
}
</style>
